物件方式
先前提到我們可以使用 v-bind 來動態綁定會變化的元素屬性，比如用 :class = "{'套用類別名稱':判斷值}"，以物件方式加入類別樣式，在這裡我們有另一種寫法，就是直接將 class 裡面所存放的物件，直接存放在 Vue 資料中，像是下面範例的 classObject，這樣的好處是可直接透過物件的方式來修改類別樣式的判斷式，而不用在另外用資料來存判斷式的值，像是 isColorRed 或 isTextBold 就可以省掉。我們用 v-on 在 button 加上 click 事件，觸發之後可以變更判斷式的值，用！否定語法，將 true 變成 false ，或 false 變成 true 來套用樣式，要注意第二種寫法，如果我們要存取物件時，如果遇到物件內的存取名稱是用-符號連接，我們要改成用['存取名稱']才不會顯示錯誤，像是 text-bold。
1
2
3
4
5
6
7
8
9
10
| <body>
<div id=app>
<p :class="{'color':isColorRed,'text-bold':isTextBold}">物件寫法1</p>
<button @click="isColorRed=!isColorRed">變紅</button>
<button @click="isTextBold=!isTextBold">變粗</button>
<p :class="classObject">物件寫法2</p>
<button @click="classObject.color=!classObject.color">變紅</button>
<button @click="classObject['text-bold']=!classObject['text-bold']">變粗</button>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
isColorRed:true,
isTextBold:true,
classObject:{
'color':true,
'text-bold':true
}
}
})
</script>
|
1
2
3
4
5
6
| .color{
color:red;
}
.text-bold{
font-weight: bold;
}
|
陣列方式
使用物件加入類別的方式，我們已經知道類別的數量一個一個去設定類別的值，如果我們今天不能判斷有多少類別樣式要套用，就得採用陣列的方式 : class = ['類別名稱','類別名稱'] 來加入類別樣式，加上前面提到，我們可以用 v-model 將一個陣列資料和 checkbox 輸入綁定，當我們點擊 checkbox 點擊欄位，所設定的 value 就會加入陣列資料中，而我們將類別樣式設定成value，當點擊後 classArray 陣列就會加入此值並且套用此類別樣式。
1
2
3
4
5
6
7
8
| <body>
<div id=app>
<p :class="['color','text-bold']">陣列寫法1</p>
<p :class="classArray">陣列寫法2</p>
<input type="checkbox" value="color" v-model="classArray"></input>
<input type="checkbox" value="text-bold" v-model="classArray"></input>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
classArray:[]
}
})
</script>
|
1
2
3
4
5
6
| .color{
color:red;
}
.text-bold{
font-weight: bold;
}
|
行內樣式
我們也可以直接插入 style 樣式屬性，而不使用類別樣式，插入樣式屬性的方式 :style = { 樣式屬性："樣式的值"}，然後也可以分為物件還有陣列的方式。最後提醒如果我們要使用到的屬性或變數，比如 font-weight 中間有 dash - 符號的名稱，我們如果直接使用它會出錯，必須使用 ' ' 將名稱包起來，或者是將它改寫成 camelCased (駝峰) 命名，將 dash 刪除並且將 dash 後面變大寫，比如像是 fontＷeight。
1
2
3
4
5
6
7
8
9
10
| <body>
<div id=app>
<h2>行內樣式</h2>
<p style="font-weight:bold;color:red;">一般插入行內樣式方法</p>
<p :style="{fontWeight:'bold',color:'red'}">物件插入行內樣式方法 1</p>
<p :style="classObjects">物件插入行內樣式方法 2</p>
<p :style="[{fontWeight:'bold'},{color:'red'}]">陣列插入行內樣式方法 1</p>
<p :style="[color,font]">陣列插入行內樣式方法 2</p>
</div>
</body>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
classObjects:{
fontWeight:'bold',
color:'red'
},
font:{
fontWeight:'bold'
},
color:{
color:'red'
}
}
})
</script>
|
自動加上 Prefix
有些瀏覽器需要加上前綴字(Prefix) ，使新的 css 語法能在不同排版的瀏覽器中正確顯示。可以透過 Can I use 這個服務來查詢哪些 css 語法，在哪些瀏覽器中需要加上前綴字 Prefix。而如果我使用 Vue 的話，Vue 會自動幫我們幫語法的前綴字補上。